<template>
    <n-breadcrumb hidden sm-block>
        <n-breadcrumb-item v-for="item in route.matched.filter((item) => !!item.meta?.title)" :key="item.path"
            @click="handleBreadClick(item.path)">
            <component :is="getIcon(item.meta)" />
            {{ item.meta.title }}
        </n-breadcrumb-item>
    </n-breadcrumb>

    <n-breadcrumb sm-hidden>
        <n-breadcrumb-item>
            <component :is="getIcon(current.meta)" />
            {{ current.meta.title }}
        </n-breadcrumb-item>
    </n-breadcrumb>
</template>
  
<script setup>
import { getIcon } from "@/utils/icon";

const router = useRouter();
const route = useRoute();

const current = computed(() => {
    const items = route.matched.filter((item) => !!item.meta?.title);
    return items[items.length - 1];
});

function handleBreadClick(path) {
    if (path === route.path) return;
    router.push(path);
}
</script>